<template>
  <page-card title="交换日志">
    <div class="public-list">
      <div class="public-list-tools">
        <a-row type="flex"
               style="margin-bottom:20px"
               justify="start">
          <a-col flex="1">
          </a-col>
          <a-col>
            <a-input-search v-model="params.keyword"
                            placeholder="关键字"
                            allow-clear
                            @search="search" />
          </a-col>
        </a-row>
      </div>
      <div class="public-list-panel">
        <a-table :columns="columns"
                 :data-source="dataList"
                 :rowKey="(item, index) => index"
                 @change="handleTableChange"
                 :pagination="pagination">
          <span slot="action"
                slot-scope="text, item">
            <template>
              <a @click="handleDetail(item)">查看</a>
            </template>
          </span>
        </a-table>
      </div>
    </div>
    <a-modal v-model="modal.visible"
             :title="modal.title"
             width="60%"
             ok-text="确定"
             cancel-text="取消"
             :centered="true"
             :footer="null">
      <div class="border">
        <a-form :form="form"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 12 }">
          <a-form-item label="主题">
            {{ info.subject }}
          </a-form-item>
          <a-form-item label="模块">
            {{ info.module }}
          </a-form-item>
          <a-form-item label="参数">
            {{ info.params }}
          </a-form-item>
          <a-form-item label="方法">
            {{ info.method }}
          </a-form-item>
          <a-form-item label="结果">
            {{ info.result }}
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </page-card>
</template>

<script>
import { PAGINATION } from '../../../constants'
import { getExchangeLogList } from '../../../api/exchanger/monitor'
export default {
  name: 'ExchangeLogList',
  data () {
    return {
      params: {
        keyword: ''
      },
      pagination: PAGINATION,
      modal: {
        visible: false,
        title: '详情'
      },
      form: this.$form.createForm(this),
      info: {},
      dataList: [],
      columns: [
        {
          title: '序号',
          width: 100,
          align: 'center',
          dataIndex: 'index',
          key: 'index',
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '主题',
          align: 'center',
          dataIndex: 'subject',
          ellipsis: true
        },
        {
          title: '结果',
          align: 'center',
          dataIndex: 'result',
          ellipsis: true
        },
        {
          title: '模块',
          align: 'center',
          dataIndex: 'module',
          ellipsis: true
        },
        {
          title: '参数',
          align: 'center',
          dataIndex: 'params',
          ellipsis: true
        },
        {
          title: '方法',
          align: 'center',
          dataIndex: 'method',
          ellipsis: true
        },
        {
          title: '应用',
          align: 'center',
          dataIndex: 'appCode',
          ellipsis: true
        },
        {
          title: '时间',
          align: 'center',
          dataIndex: 'createTime',
          ellipsis: true
        },
        {
          title: '操作',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 搜索
    search () {
      this.dataList = []
      this.pagination.current = 1
      this.getList()
    },
    // 重置
    reset () {
      this.params = {
        keyword: ''
      }
      this.pagination.current = 1
      this.getList()
    },
    // 列表数据
    getList () {
      let par = {
        currPage: this.pagination.current,
        pageSize: this.pagination.pageSize,
        keyword: this.params.keyword
      }
      getExchangeLogList(par).then(res => {
        this.dataList = res.list || []
        this.pagination.current = res.currPage
        this.pagination.total = res.totalCount
        this.pagination.pageSize = res.pageSize
      })
    },
    // 详情
    handleDetail (item) {
      this.info = item
      this.modal.visible = true
    },
    // 分页、排序、筛选变化时触发
    handleTableChange (pagination, filters, sorter) {
      this.pagination = pagination
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .ant-form-item {
  .ant-form-item-control-wrapper {
    max-height: 240px;
    overflow-y: auto;
  }
}
</style>